<template>
  <div>
    <div class="search">
      <el-autocomplete
        v-model="state"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入内容"
        @select="handleSelect"
      />
    </div>
    <div class="Tree">
      <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
        <!-- <i class="el-icon-eleme" /> -->
        <span slot-scope="{ node, data }">
          <i class="iconfont icon-wenjianjia" />
          <span style="padding-left: 4px;">{{ node.label }}</span>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      restaurants: [],
      state: '',
      timeout: null,
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  mounted() {
    this.restaurants = this.loadAll()
  },
  methods: {
    loadAll() {
      return [
        { 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号' },
        { 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
        { 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
        { 'value': '泷千家(天山西路店)', 'address': '天山西路438号' },
        { 'value': '胖仙女纸杯蛋糕（上海凌空店）', 'address': '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
        { 'value': '贡茶', 'address': '上海市长宁区金钟路633号' }
      ]
    },
    querySearchAsync(queryString, cb) {
      const restaurants = this.restaurants
      const results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants

      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 3000 * Math.random())
    },
    createStateFilter(queryString) {
      return (state) => {
        // return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        return state.value === 0
      }
    },
    handleSelect(item) {
      console.log(item)
    },
    // 树状
    handleNodeClick(data) {
      console.log(data)
    }
  }
}
</script>

<style lang="scss" scoped>
.search{
  padding-top: 1.25rem;
  display: flex;
  justify-content: center;
}
.Tree{
  margin-top: 1.25rem;
}
</style>
<style>
.search .el-input__inner{
  background-color: #27354E;
  border: 1px solid #27354E;
  color: #f4f4f5;
}
.search .el-input__inner:focus {
    border-color: #27354E;
    outline: 0;
}
.search .el-input__inner:hover {
    border-color: #27354E;
    outline: 0;
}
.Tree .el-tree{
  background-color: #1C283C;
}
.Tree .el-tree-node__content:hover {
  background-color: #27354E;
}
.Tree .el-tree-node:focus>.el-tree-node__content{
  background-color: #27354E;
}
.Tree .el-tree-node__label{
  color: #f4f4f5;
}
</style>
